<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>编辑资料</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__CSS__/oksub.css">
    <script type="text/javascript" src="__LIB__/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
    <div class="layui-tab layui-tab-brief ibms-tab" lay-filter="infoTab">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="wan">外网：专线</li>
            <li lay-id="adsl">外网：ADSL</li>
            <li lay-id="cnk">净网先锋</li>
            <li lay-id="mirror">端口镜像</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table class="layui-hide" id="wanTable" lay-filter="wanTable"></table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-hide" id="adslTable" lay-filter="adslTable"></table>
            </div>
            <div class="layui-tab-item ibms-tab-form ibms-dialog-form">
                <form class="layui-form" lay-filter="cnkForm">
                    <div class="layui-form-item">
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">网吧编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="cnkid" lay-verify="required1" placeholder="请输入网吧编码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">校验码</label>
                            <div class="layui-input-block">
                                <input type="text" name="checkcode" lay-verify="required1" placeholder="请输入校验码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">终端数量</label>
                            <div class="layui-input-block">
                                <input type="text" name="pc_count" lay-verify="required1" placeholder="请输入终端数量" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">法人代表</label>
                            <div class="layui-input-block">
                                <input type="text" name="legal" lay-verify="required1" placeholder="请输入法人代表" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">负责人</label>
                            <div class="layui-input-block">
                                <input type="text" name="incharge" lay-verify="required1" placeholder="请输入负责人" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">负责人电话</label>
                            <div class="layui-input-block">
                                <input type="text" name="cellphone" lay-verify="required1" placeholder="请输入负责人电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="save">立即提交</button>
                            <a class="layui-btn layui-btn-primary cancle-btn">取消</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item ibms-tab-form ibms-dialog-form">
                <form class="layui-form" lay-filter="mirrorForm">
                    <div class="layui-form-item">
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">设备IP地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="device_ip" lay-verify="" placeholder="请输入镜像设备IP地址" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">设备类型</label>
                            <div class="layui-input-block">
                                <select name="device_type" id="icafecate">
                                    <option value="" selected>请选择设备类型</option>
                                    <option value="1">交换机</option>
                                    <option value="2">路由器</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input type="text" name="device_username" lay-verify="" placeholder="请输入设备用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="text" name="device_password" lay-verify="" placeholder="请输入设备密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">源端口</label>
                            <div class="layui-input-block">
                                <input type="text" name="source" lay-verify="" placeholder="请输入源端口(主线)" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <label class="layui-form-label">目的端口</label>
                            <div class="layui-input-block">
                                <input type="text" name="destination" lay-verify="" placeholder="请输入目的端口(审计)" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="save">立即提交</button>
                            <a class="layui-btn layui-btn-primary cancle-btn">取消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--js逻辑-->
<script src="__LIB__/layui/layui.js"></script>
<script>
    layui.use(["element", "form", "jquery", "okLayer", "okUtils", "table"], function () {
        let element = layui.element;
        let form = layui.form;
        let $ = layui.jquery;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let table = layui.table;
        okLoading.close();

        // tab定位
        let tabIndex = location.hash.replace(/^#tab=/, '');
        element.tabChange('infoTab', tabIndex);
        element.on('tab(infoTab)', function (elem) {
            location.hash = 'tab='+ $(this).attr('lay-id');
        });

        // 表单赋值：parent.rowData为父页面传过来的行数据
        let initData = JSON.parse(JSON.stringify(parent.rowData));
        form.val("cnkForm", initData.icafeCnk);
        form.val("mirrorForm", initData.icafeMirror);

        // 渲染：wan表格
        let wanTable = table.render({
            elem: '#wanTable',
            url: "{:url('icafeWan/getTableData')}",
            where: {"icafe_id": initData.id},
            limit: 5,
            limits: [5],
            page: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            cols: [[
                {type: "checkbox"},
                {field: "isp_id", title: "运营商", width: 90, templet: "#ispTpl"},
                {field: "bandwidth", title: "带宽", width: 60},
                {field: "ipaddress", title: "IP地址", width: 125},
                {field: "mask", title: "掩码", width: 125},
                {field: "gateway", title: "网关", width: 125},
                {field: "remarks", title: "备注"},
                {title: "操作", width: 70, align: "center", fixed: "right", templet: "#operationTpl"}
            ]],
            done: function (res, curr, count) {
                // console.info(res, curr, count);
            }
        });

        // 渲染：adsl信息
        let adslTable = table.render({
            elem: '#adslTable',
            url: "{:url('icafeAdsl/getTableData')}",
            where: {"icafe_id": initData.id},
            limit: 5,
            limits: [5],
            page: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            cols: [[
                {type: "checkbox"},
                {field: "isp_id", title: "运营商", width: 110, templet: "#ispTpl"},
                {field: "bandwidth", title: "带宽", width: 80},
                {field: "adsl_account", title: "宽带账号", width: 150},
                {field: "adsl_password", title: "宽带密码", width: 150},
                {field: "remarks", title: "备注"},
                {title: "操作", width: 70, align: "center", fixed: "right", templet: "#operationTpl"}
            ]],
            done: function (res, curr, count) {
                // console.info(res, curr, count);
            }
        });

        table.on("toolbar", function (obj) {
            switch (obj.event) {
                case "batchDel":
                    batchDel();
                    break;
                case "add":
                    add();
                    break;
            }
        });

        table.on("tool", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "del":
                    del(data.id);
                    break;
            }
        });

        function batchDel() {
            okLayer.confirm("确定要批量删除吗？", function (index) {
                layer.close(index);
                let idsStr, tabID = $(".layui-this").attr("lay-id");
                switch (tabID) {
                    case "wan":
                        idsStr = okUtils.tableBatchCheck(table, "wanTable");
                        if (idsStr) {
                            okUtils.ajax("{:url('icafeWan/delete')}", "post", {idsStr: idsStr}, true).done(function (response) {
                                okLayer.greenTickMsg(response.msg, function () {
                                    wanTable.reload();
                                });
                            }).fail(function (error) {
                                // console.log(error)
                            });
                        }
                        break;
                    case "adsl":
                        idsStr = okUtils.tableBatchCheck(table, "adslTable");
                        if (idsStr) {
                            okUtils.ajax("{:url('icafeAdsl/delete')}", "post", {idsStr: idsStr}, true).done(function (response) {
                                okLayer.greenTickMsg(response.msg, function () {
                                    adslTable.reload();
                                });
                            }).fail(function (error) {
                                // console.log(error)
                            });
                        }
                        break;
                }
            });
        }

        function add() {
            let tabID = $(".layui-this").attr("lay-id");
            switch (tabID) {
                case "wan":
                    okLayer.open("添加外网：专线", "{:url('icafeWan/add')}", "600px", "400px", null, function () {
                        wanTable.reload();
                    });
                    break;
                case "adsl":
                    okLayer.open("添加外网：ADSL", "{:url('icafeAdsl/add')}", "600px", "400px", null, function () {
                        adslTable.reload();
                    });
                    break;
            }
        }

        function edit(data) {
            window.rowData = data;
            let tabID = $(".layui-this").attr("lay-id");
            switch (tabID) {
                case "wan":
                    okLayer.open("编辑外网：专线", "{:url('icafeWan/edit')}", "600px", "400px", null, function () {
                        wanTable.reload();
                    });
                    break;
                case "adsl":
                    okLayer.open("编辑外网：ADSL", "{:url('icafeAdsl/edit')}", "600px", "400px", null, function () {
                        adslTable.reload();
                    });
                    break;
            }
        }

        function del(id) {
            okLayer.confirm("确定要删除吗？", function () {
                let tabID = $(".layui-this").attr("lay-id");
                switch (tabID) {
                    case "wan":
                        okUtils.ajax("{:url('icafeWan/delete')}", "post", {idsStr: id}, true).done(function (response) {
                            okLayer.greenTickMsg(response.msg, function () {
                                wanTable.reload();
                            });
                        }).fail(function (error) {
                            // console.log(error)
                        });
                        break;
                    case "adsl":
                        okUtils.ajax("{:url('icafeAdsl/delete')}", "post", {idsStr: id}, true).done(function (response) {
                            okLayer.greenTickMsg(response.msg, function () {
                                adslTable.reload();
                            });
                        }).fail(function (error) {
                            // console.log(error)
                        });
                        break;
                }
            })
        }

        form.on("submit(save)", function (data) {
            let url, filter = $(this).parents('form').attr('lay-filter');
            switch (filter) {
                case "cnkForm":
                    url = "{:url('icafeCnk/save')}?icafe_id=" + initData.id;
                    break;
                case "mirrorForm":
                    url = "{:url('icafeMirror/save')}?icafe_id=" + initData.id;
                    break;
            }
            okUtils.ajax(url, "post", data.field, true).done(function (response) {
                okLayer.greenTickMsg(response.msg, function () {
                    // parent.layer.close(parent.layer.getFrameIndex(window.name))
                });
            }).fail(function (error) {
                // console.log(error)
            });
            return false;
        });

        $(".cancle-btn").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
    });
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a href="http://{{d.ipaddress}}:{{d.wan_port}}" title="访问" target="_blank"><i class="layui-icon">&#xe7ae;</i></a>
    <a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
<!-- 运营商模板 -->
<script type="text/html" id="ispTpl">
    {{#  if(d.icafeIsp == null) { }}
    <span class="layui-badge layui-btn-disabled layui-btn-xs ibms-btn-xs">未知类型</span>
    {{#  } else if(d.icafeIsp.bgcolor == "") { }}
    <span class="layui-badge layui-btn-primary layui-btn-xs ibms-btn-xs">{{d.icafeIsp.name}}</span>
    {{#  } else { }}
    <span class="layui-badge layui-btn-xs ibms-btn-xs" style="background-color: {{d.icafeIsp.bgcolor}};">{{d.icafeIsp.name}}</span>
    {{#  } }}
</script>
</body>
</html>
